<script lang="tsx">
import { defineComponent, type PropType } from "vue"

export default defineComponent({
	name: "Bubble",
	props: {
		info: {
			type: String as PropType<string>,
			required: true,
		},
	},
	setup(props) {
		return () => (
			<div class={`bubble-container`}>
				<div class="bublle-inner">{props.info}</div>
			</div>
		)
	},
})
</script>

<style lang="less" scoped>
.bublle-inner {
	border: 1px solid var(--chen-border-color);
	background-color: var(--chen-color-black);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	user-select: none;
}
</style>
